<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pic.css">
</head>



<body>
    <h1>照片库示例</h1>
    <div class="full-img">
        <img class="displayed-img" src="images/pic1.jpg">
        <div class="overlay"></div>
        <button class="dark">变暗</button>
    </div>
    <div class="thumb-bar"></div>

    <script>
        const displayedImage = document.querySelector('.displayed-img');
        const thumbBar = document.querySelector('.thumb-bar');

        const btn = document.querySelector('button');
        const overlay = document.querySelector('.overlay');

        for(let i = 1;i<=5;i++){
            const newImage = document.createElement('img');
            newImage.setAttribute('src','images/pic'+i+'.jpg');
            thumbBar.appendChild(newImage);
            newImage.onclick = function(e) {
                displayedImage.src = e.target.src;
            }
        }

        btn.onclick = function(){
            const btnClass = btn.getAttribute('class');
            if(btnClass === 'dark') {
                btn.setAttribute('class','light');
                btn.textContent = '变亮';
                overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';

            }else {
                btn.setAttribute('class','dark');
                btn.textContent = '变暗';
                overlay.style.backgroundColor = 'rgba(0,0,0,0)';
            }
        }
    </script>
</body>
</html>